﻿<!-- Views/Employee/Index.cshtml - 重新设计版本 -->
@model List<WebApplication1.Models.Exam>

@{
    ViewBag.Title = WebApplication1.Utilities.LanguageManager.GetText("EmployeeDashboard") + " - " + WebApplication1.Utilities.LanguageManager.GetText("ExamTitle");
}

<div class="container">
    <!-- 欢迎信息 -->
    <div class="row">
        <div class="col-12">
            <div class="jumbotron bg-primary text-white rounded-3 mb-4">
                <div class="container">
                    <h1 class="display-5">
                        <i class="glyphicon glyphicon-education me-3"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("WelcomeMessage")
                    </h1>
                    <p class="lead">@WebApplication1.Utilities.LanguageManager.GetText("Welcome")<strong> @Session["UserName"]</strong>!</p>
                    <hr class="my-4 bg-white">
                    <p>@WebApplication1.Utilities.LanguageManager.GetText("ChooseExamOrPractice")</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 功能导航卡片 -->
    <!--<div class="row mb-4">
        <div class="col-md-6 mb-4">
            <div class="card border-primary h-100 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="glyphicon glyphicon-list-alt me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("ExamMode")
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">@WebApplication1.Utilities.LanguageManager.GetText("ExamModeDescription")</p>
                    <a href="#active-exams" class="btn btn-primary">
                        <i class="glyphicon glyphicon-play-circle me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("StartExam")
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card border-success h-100 shadow-sm">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="glyphicon glyphicon-book me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("PracticeMode")
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">@WebApplication1.Utilities.LanguageManager.GetText("PracticeModeDescription")</p>
                    <a href="@Url.Action("PracticeHistory", "Employee")" class="btn btn-success">
                        <i class="glyphicon glyphicon-education me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("StartPractice")
                    </a>
                </div>
            </div>
        </div>
    </div>-->

    <!-- 活动考试列表 -->
    <div class="row" id="active-exams">
        <div class="col-12">
            <div class="card border-primary shadow-sm">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="glyphicon glyphicon-blackboard me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("ActiveExams")
                    </h4>
                    <span class="badge bg-light text-dark">@Model.Count @WebApplication1.Utilities.LanguageManager.GetText("Exams")</span>
                </div>
                <div class="card-body">
                    @if (Model != null && Model.Count > 0)
                    {
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>@WebApplication1.Utilities.LanguageManager.GetText("ExamName")</th>
                                        <th>@WebApplication1.Utilities.LanguageManager.GetText("Description")</th>
                                        <th>@WebApplication1.Utilities.LanguageManager.GetText("Duration") (@WebApplication1.Utilities.LanguageManager.GetText("Minutes"))</th>
                                        <th class="text-center">@WebApplication1.Utilities.LanguageManager.GetText("Action")</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var exam in Model)
                                    {
                                        <tr>
                                            <td>
                                                <strong class="text-primary">@exam.ExamName</strong>
                                            </td>
                                            <td>
                                                @if (!string.IsNullOrEmpty(exam.Description))
                                                {
                                                    <span class="text-muted">@exam.Description</span>
                                                }
                                                else
                                                {
                                                    <span class="text-muted">@WebApplication1.Utilities.LanguageManager.GetText("NoDescription")</span>
                                                }
                                            </td>
                                            <td>
                                                <span class="badge bg-info">@exam.Duration</span>
                                            </td>
                                            <td class="text-center">
                                                <div class="btn-group" role="group">
                                                    <a href="@Url.Action("TakeExam", "Employee", new { id = exam.ExamId })"
                                                       class="btn btn-primary btn-sm">
                                                        <i class="glyphicon glyphicon-play me-1"></i>
                                                        @WebApplication1.Utilities.LanguageManager.GetText("TakeExam")
                                                    </a>
                                                    <a href="@Url.Action("StartPractice", "Employee", new { id = exam.ExamId })"
                                                       class="btn btn-success btn-sm">
                                                        <i class="glyphicon glyphicon-education me-1"></i>
                                                        @WebApplication1.Utilities.LanguageManager.GetText("Practice")
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    }
                    else
                    {
                        <div class="alert alert-info text-center">
                            <i class="glyphicon glyphicon-info-sign me-2"></i>
                            @WebApplication1.Utilities.LanguageManager.GetText("NoActiveExams")
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

    <!-- 快捷操作 -->
    <div class="row mt-4">
        <div class="col-md-6 mb-3">
            <div class="card border-info shadow-sm">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="glyphicon glyphicon-stats me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("MyResults")
                    </h5>
                </div>
                <div class="card-body text-center">
                    <a href="@Url.Action("MyExamResults", "Employee")" class="btn btn-info btn-lg w-100">
                        <i class="glyphicon glyphicon-list-alt me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("MyExamResults")
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-3">
            <div class="card border-success shadow-sm">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="glyphicon glyphicon-book me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("MyPractice")
                    </h5>
                </div>
                <div class="card-body text-center">
                    <a href="@Url.Action("PracticeHistory", "Employee")" class="btn btn-success btn-lg w-100">
                        <i class="glyphicon glyphicon-history me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("PracticeHistory")
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .jumbotron {
        background: linear-gradient(135deg, #4b4b4b 0%, #0056b3 100%);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-radius: 10px;
        overflow: hidden;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
    }

    .table th {
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .btn-group .btn {
        border-radius: 0;
    }

    .btn-group .btn:first-child {
        border-radius: 5px 0 0 5px;
    }

    .btn-group .btn:last-child {
        border-radius: 0 5px 5px 0;
    }

    .badge {
        font-weight: 500;
    }

    .display-5 {
        font-size: 2.5rem;
    }

    .lead {
        font-size: 1.25rem;
    }

    @@media (max-width: 768px) {
        .display-5 {
            font-size: 2rem;
        }

        .lead {
            font-size: 1.1rem;
        }

        .table-responsive {
            font-size: 0.9rem;
        }

        .btn-group {
            flex-direction: column;
        }

        .btn-group .btn {
            border-radius: 5px !important;
            margin-bottom: 5px;
        }
    }
</style>